<template>
    <div ref="PortFlux" class="lineBox"></div>
</template>>

<script>
import { fetchData2 } from '@/api/index.js';
import bus from 'common/bus.js';


export default {
    data() {
        return {
            postData: {
                opera: 'OSNetworkIfio',
                curPage: 1,
                pageSize: 10,
                sort: {
                    sortColumn: 'rtx_gb',
                    sortOrders: 'desc'
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "",
                },
            },
            PortFlux: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: ''
                    }
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    height: '95%',
                    containLabel: true
                },
                xAxis: {
                    useData: [],
                    data: [],
                    axisLabel: {
                        show: false
                        // interval: '0'
                    },
                    axisTick:{
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        color:'rgb(29, 140, 248)',
                        lineStyle:{
                            color:'rgb(29, 140, 248)'
                        }}
                },
                yAxis: {
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                    type: 'value',
                    min: 0,
                    splitLine: { 
                        lineStyle: {
                            color: 'rgb(29, 140, 248)',
                            opacity: 0.1
                        }
                    }
                },
                series: [{
                    name: '端口流量(GB)',
                    data: [],
                    type: 'bar',
                    color: 'rgb(0, 121, 200)',
                    barWidth: '50%',
                }]
            },
            timerName: 'PortFlux',
            timerEventName: 'timerPortFlux',
            timerInterval: 1000 * 30
        }
    },
    created() {
        bus.$on('selectedNetMonID', msg => {
            // 获取数据
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedNETMonID;
            this.getData();
        });

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
    },
    mounted() {
        this.PortFlux = this.$echarts.init(this.$refs.PortFlux);
        this.initFileSystemLine();
    },
    computed: {
        
    },
    methods: {
        getData(){
            fetchData2({
                hid:this.$route.query.MONID
            }).then((res) => {
				console.log('zz',res)
				let num = res.splice(0,10)
                this.EChartsOption.xAxis.data = [];
                this.EChartsOption.xAxis.useData = [];
                // let _arr = res.data.slice(0, 10);
                num.forEach(item => {
					console.log(item)
                    this.EChartsOption.xAxis.data.push((item.ifname));
                    this.EChartsOption.xAxis.useData.push(item.rtxKbyteSpeed);
					
                });
				
				
				console.log("545",this.EChartsOption)
                this.updateFileSystemLine();
            });
        },
        initFileSystemLine(){
            this.PortFlux.setOption(this.EChartsOption);
        },
        updateFileSystemLine() {
            this.PortFlux.setOption({
                xAxis: {
                    data: this.EChartsOption.xAxis.data
                },
                series: {
                    data: this.EChartsOption.xAxis.useData
                }
            })
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>
.lineBox{
    height: 100%;
}
</style>